import React, { useEffect, useState } from "react";
import GridWrapper from "../gridWrapper";
import PieChart from "../../../../components/charts/bill/pieChart";
import LineChart from "../../../../components/charts/bill/lineChart";
import DotChart from "../../../../components/charts/bill/dotChart";
import { useHistory } from "react-router-dom";
import { message, notification } from "antd";

import { getBillList } from "utils/api/billApi";

import "assets/less/components/charts/billChart.less";

// 布局位置
const layouts = {
  lg: [
    { i: "a", x: 0, y: 0, w: 10, h: 14, minH: 10, minW: 8 },
    { i: "b", x: 10, y: 0, w: 14, h: 14, minH: 9, minW: 7 },
    { i: "c", x: 0, y: 14, w: 14, h: 17, minH: 17, minW: 7 }
  ],
  md: [
    { i: "a", x: 2, y: 0, w: 16, h: 13, minH: 9, minW: 8 },
    { i: "b", x: 2, y: 13, w: 16, h: 13, minH: 9, minW: 8 },
    { i: "c", x: 2, y: 22, w: 16, h: 15, minH: 13, minW: 8 }
  ],
  sm: [
    { i: "a", x: 0, y: 0, w: 12, h: 13, minH: 9, minW: 6 },
    { i: "b", x: 0, y: 0, w: 12, h: 13, minH: 9, minW: 6 },
    { i: "c", x: 0, y: 0, w: 12, h: 17, minH: 13, minW: 6 }
  ]
};

function getTitleByType(type) {
  switch(type) {
    case 'week': {
      return '周支出报告'
    }
    case 'month': {
      return '月度收支统计'
    }
    case 'year': {
      return '年度账单'
    }
    default : {
      return '支出报告'
    }
  }
}

const BillChart = ({ type }) => {
  const [data, setData] = useState([]);
  const history = useHistory();

  useEffect(() => {
    getBillList({ range: type })
      .then(res => {
        if (res.err === 0) {
          setData(res.data);
        } else if (res.err === -998) {
          message.error("登录过期，请重新登录！");
          history.push("/login");
        } else {
          notification.error({
            message: res.msg
          });
        }
      })
      .catch(err => {
        console.log(err);
      });
  }, []);

  const title = getTitleByType(type);

  return (
    <GridWrapper className="computer-chart" layouts={layouts}>
      <PieChart data={data} type={type} title={title} name="支出情况" />
      <LineChart data={data} type={type} title={title} name="支出情况" />
      <DotChart data={data} type={type} title={title} name="支出情况" />
    </GridWrapper>
  );
};

export default BillChart;
